import React from 'react';
import { inject, observer } from 'mobx-react';
import { Row, Col ,Button , Steps , Modal , message} from 'antd';
import { WeaInput , WeaBrowser,WeaFormItem,WeaTransfer , WeaSelect , WeaTop ,WeaInputSearch,WeaDialog,WeaSteps,WeaRightMenu,WeaLocaleProvider} from 'ecCom';
import * as mobx from 'mobx';

import allStore from '../../stores';

import AddByGroup from './addReport/AddByGroup';
import '../../style/customReportAdd.less';
//
import BaseInfo from './addReport/BaseInfo';
import TransferComs from './addReport/TransferComs';
import TipsModal from './addReport/TipsModal';
// const Step = Steps.Step;
const Step = WeaSteps.Step;
const getLabel = WeaLocaleProvider.getLabel;

@inject('wfCusReportAddStore')

@observer
export default class AddSubComs extends React.Component{
    constructor(props){
        super(props);
        this.state={
            timeLineArr:[
                {
                    name:getLabel(1361,'基本信息')
                },
                {
                    name:getLabel(386274,'统计分组')
                },
                {   
                    name:getLabel(386275,'统计项目')
                },
                {
                    name:getLabel(132112,'数据排序')
                },
                {
                    name:getLabel(386276,'设置完成')
                }
            ],
            //
            tipShowInfo:'',
            tipsModalShow:false
            
        }
    }
    //transfer信息保存提示
    saveConfirm=(index)=>{
        const {wfCusReportAddStore} = this.props;
        const { groupFlag , sortFlag , groupSelectedKeys , sortSelectedKeys ,proJectFlag, baseInfoFlag ,reportBaseinfo , currentStep ,
                setCurrentStep ,proJectDataSource ,eachStepSave,editPortFlag,reportid} = wfCusReportAddStore;
        let flagState = 0 , tempState = baseInfoFlag;
        let datas = {};
        //保存后可以跨step点击
        if(index==0){
            tempState = baseInfoFlag
        }else if(index==1){
            tempState = groupFlag
        }else if(index==2){
            tempState = proJectFlag
        }else{
            tempState = sortFlag
        }
        //
        switch(currentStep){
            case 0:
                flagState = baseInfoFlag;
                datas = reportBaseinfo;
                break;
            case 1:
                flagState = groupFlag;
                datas = {groupSelectedKeys:mobx.toJS(groupSelectedKeys)};
                break;
            case 2:
                flagState =  proJectFlag;
                datas = {proJectSource:proJectDataSource};
                break;
            case 3:
                flagState = sortFlag;
                datas = {sortSelectedKeys:mobx.toJS(sortSelectedKeys)} 
                break;  
            default:
                flagState = 1;
                break;
        }
        if((!tempState&&Math.abs(index-currentStep)>1)){//开始时不能垮step点击
            message.warning(getLabel(384992,"请按顺序填写！"));
            return;
        }else{
            if(flagState){
                setCurrentStep(index);
            }else{
                eachStepSave({...datas,step:currentStep+1,changeCurFlag:1,changeCurIndex:index});
            }
        }
    }
    //基本信息检测
    checkBaseInfo=(index)=>{
        let this_ = this;
        const {wfCusReportAddStore} = this.props;
        const{ baseInfoFlag,setCurrentStep,eachStepSave ,reportBaseinfo,editPortFlag,reportid,form,formBrowserId} = wfCusReportAddStore;
    
        let formParams = form.getFormParams();

        form.validateForm().then(v=>{
            if(v.isValid){
                if(baseInfoFlag){
                    if(index>=0) {
                        setCurrentStep(index);
                    }else if(reportid&&reportid!=""&&editPortFlag){
                            message.destroy();
                            message.success(getLabel(83551,"保存成功！"));
                        }
                }else{
                    if(reportBaseinfo.workflowToFormid==''&&formBrowserId==''){
                        this.setState({
                            tipShowInfo:getLabel(384993,'对应表单及相关路径，两者至少需要填写一个！'),
                            tipsModalShow:true
                        })
                    }else{
                        if(reportid&&reportid!=""){
                            eachStepSave({...formParams,...wfCusReportAddStore.reportBaseinfo,step:1});
                            if(index>=0) setCurrentStep(index);
                        }else{
                            Modal.confirm({
                                content: getLabel(386280,"保存之后不能修改表单信息，确定要保存吗？"),
                                onOk() {
                                    eachStepSave({...formParams,...wfCusReportAddStore.reportBaseinfo,step:1});
                                    if(index>=0) setCurrentStep(index);
                                },
                                onCancel() {jQuery(".cus_report_name").focus();},
                            });
                        }
                    }
                }
            }else{
                v.showErrors();
                this.setState({log: `${new Date()}`})
            }
        })

    }
    componentDidMount() {
    }

    dialogCancel = ()=>{
      const { wfCusReportAddStore } = this.props;
      const { setCusReportAddModalShow} = wfCusReportAddStore;
      setCusReportAddModalShow(false);
      allStore.wfCusReportFormStore.reload();
  }
    render(){
        let that = this;
        const { tipShowInfo , tipsModalShow} = this.state;

        const { wfCusReportAddStore } = this.props;
        const {currentStep ,customReportAddModalShow,loading,reportid,title,modalTitle} = wfCusReportAddStore;
        const { setCusReportAddModalShow} = wfCusReportAddStore;
        const { timeLineArr } =this.state;
        let itemArr = [];
            {timeLineArr?timeLineArr.map(function(item,index){
                itemArr.push(
                    <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@9gl96s@${index}`}  description={item.name} onClick={
                        currentStep==0?that.checkBaseInfo.bind(that,index):that.saveConfirm.bind(that,index)
                    }
                    />
                )
            }):''}
        return(
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@3ei9u2`}
                loading = {loading}
                visible={customReportAddModalShow}
                icon="icon-coms-workflow"
                iconBgcolor='#0079DE'
                title={getLabel(386304,"新建分析报表")}
                buttons={this.getButtons(currentStep)}
                closable={true}
                onCancel={this.dialogCancel}
                style={{
                    width:"962px",height:"541px",
                }}
                draggable={false}
                moreBtn={{datas:this.getRightMenu(),collectParams:{favname:getLabel(386304,"新建分析报表"), favouritetype:2}}}
            >
                <div className="wf-custom-report-add-container">
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@zx9346`} 
                            collectParams={{favname:getLabel(386304,"新建分析报表"), favouritetype:2}}
                            datas={this.getRightMenu()}
                        >
                    {/* 时间线 */}
                    {/* <Steps current={currentStep}>
                        {itemArr}
                    </Steps> */}
                    <WeaSteps ecId={`${this && this.props && this.props.ecId || ''}_WeaSteps@5xs3u7`} current={currentStep}>
                        {itemArr}
                    </WeaSteps>
                    {/* 内容 */}
                    {/* 1基本信息 */}
                    {currentStep==0&&
                        <BaseInfo ecId={`${this && this.props && this.props.ecId || ''}_BaseInfo@cwbspj`}/>
                    }
                    {/* 2统计分组 */}
                    {currentStep==1&&
                        <TransferComs ecId={`${this && this.props && this.props.ecId || ''}_TransferComs@k9p2wb`} tags="group"/>
                    }
                    {/* 统计项目 */}
                    {currentStep==2&&<AddByGroup ecId={`${this && this.props && this.props.ecId || ''}_AddByGroup@14mgle`}/>
                    }
                    {/* 数据排序 */}
                    {currentStep==3&&
                        <TransferComs ecId={`${this && this.props && this.props.ecId || ''}_TransferComs@qmndmq`} tags="sort"/>
                    }
                    {/* 完成 */}
                    {currentStep==4&&
                        <div className="success-five-step">
                                <p><img src="/images/ecology9/workflow/wf_custom_report_success.png"/></p>
                                <p>{getLabel(386281,"您已完成了报表分析的全部配置过程")}</p>
                                <p>{getLabel(384990,"如需修改，可直接点击顶部页签定位到对应内容设置界面进行调整")}</p>
                        </div>
                    }
                    </WeaRightMenu>
                </div>
                {/* 提示 */}
                <TipsModal ecId={`${this && this.props && this.props.ecId || ''}_TipsModal@j7sbdd`}
                    visible={tipsModalShow}
                    showInfo={tipShowInfo}
                    cancelHandle={()=>{
                        this.setState({
                            tipShowInfo:'',
                            tipsModalShow:false
                        })
                    }}
                />
            </WeaDialog>
        )
    }
    getRightMenu(){
        const {wfCusReportAddStore} = this.props;
        const { groupFlag , sortFlag ,proJectDataSource,eachStepSave,setCusReportAddModalShow,currentStep,groupSelectedKeys,sortSelectedKeys} = wfCusReportAddStore;

        let actionBtn = [];
        if(currentStep==0){
            actionBtn = [{
                            key:'1',
                            disabled: false,
                            icon:<i className='icon-coms-Preservation'/> ,
                            content:getLabel(86,'保存'),
                            onClick: key => {this.checkBaseInfo(-1)},
                        },
                        {
                            key:'2',
                            disabled: false,
                            icon:<i className='icon-coms-Next-step'/> ,
                            content:getLabel(1402,'下一步'),
                            onClick: key => this.checkBaseInfo(1),
                        }]
        }else if(currentStep==1||currentStep==2||currentStep==3){
            let params = {};
            actionBtn =  [
                        {
                            key:'1',
                            disabled: false,
                            icon:<i className='icon-coms-Last-step'/> ,
                            content:getLabel(1876,'上一步'),
                            onClick: key => this.saveConfirm(currentStep-1),
                        },{
                            key:'2',
                            disabled: false,
                            icon:<i className='icon-coms-Preservation'/> ,
                            content:getLabel(86,'保存'),
                            onClick: key => {
                                currentStep==1&&eachStepSave({groupSelectedKeys:groupSelectedKeys,step:2});
                                currentStep==2&&eachStepSave({proJectSource:proJectDataSource,step:3});
                                currentStep==3&&eachStepSave({sortSelectedKeys:sortSelectedKeys,step:4});
                            },
                        },
                        {
                            key:'3',
                            disabled: false,
                            icon:<i className='icon-coms-Next-step'/> ,
                            content:getLabel(1402,'下一步'),
                            onClick: key => this.saveConfirm(currentStep+1),
                        }]
        }else{
            actionBtn = [{
                key:'1',
                disabled: false,
                icon:<i className='icon-coms-Last-step'/> ,
                content:getLabel(1876,'上一步'),
                onClick: key => this.saveConfirm(currentStep-1),
            },{
                key:'2',
                disabled: false,
                icon:<i className='icon-coms-Upload-successfully'/> ,
                content:getLabel(555,'完成'),
                onClick: key => {
                    setCusReportAddModalShow(false);
                    allStore.wfCusReportFormStore.reload();
                },
            }]
        }
        return actionBtn;
    }
    getButtons=(index)=>{
        const {wfCusReportAddStore} = this.props;
        const { groupFlag , sortFlag ,proJectDataSource,eachStepSave,setCusReportAddModalShow} = wfCusReportAddStore;
        let btnsArr = [
            {
                buttons:[
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6lrv36@save`} type="primary" onClick={this.checkBaseInfo.bind(this,-1)}>{getLabel(86,'保存')}</Button>),
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@32p33m@nextStep`} type="primary" onClick={this.checkBaseInfo.bind(this,1)}>{getLabel(1402,'下一步')}</Button>),
                    // (<Button type="ghost" onClick={()=>{setCusReportAddModalShow(false);allStore.wfCusReportFormStore.reload();}}>取消</Button>)
                ]
            },
            {
                buttons:[
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@k16tbc@lastStep`} type="primary" onClick={this.saveConfirm.bind(this,0)}>{getLabel(1876,'上一步')}</Button>),
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@znqm73@save`} type="primary" onClick={()=>{
                        eachStepSave({groupSelectedKeys:wfCusReportAddStore.groupSelectedKeys,step:2})
                    }} >{getLabel(86,'保存')}</Button>),
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@cdj5op@nextStep`} type="primary" onClick={this.saveConfirm.bind(this,2)}>{getLabel(1402,'下一步')}</Button>),
                    // (<Button type="ghost" onClick={()=>{setCusReportAddModalShow(false);allStore.wfCusReportFormStore.reload();}}>取消</Button>)
                ]
            },
            {   
                buttons:[
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gv3dac@lastStep`} type="primary" onClick={this.saveConfirm.bind(this,1)}>{getLabel(1876,'上一步')}</Button>),
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bol9by@save`} type="primary" onClick={()=>{
                        eachStepSave({proJectSource:proJectDataSource,step:3});
                    }} >{getLabel(86,'保存')}</Button>),
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@c70l7t@nextStep`} type="primary" onClick={this.saveConfirm.bind(this,3)}>{getLabel(1402,'下一步')}</Button>),
                    // (<Button type="ghost" onClick={()=>{setCusReportAddModalShow(false);allStore.wfCusReportFormStore.reload();}}>取消</Button>)
                ]
            },
            {
                buttons:[
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zs96of@lastStep`} type="primary" onClick={this.saveConfirm.bind(this,2)}>{getLabel(1876,'上一步')}</Button>),
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@t666fl@save`} type="primary" onClick={()=>{
                        eachStepSave({sortSelectedKeys:wfCusReportAddStore.sortSelectedKeys,step:4});
                    }}>{getLabel(86,'保存')}</Button>),
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@64aq1q@nextStep`} type="primary" onClick={this.saveConfirm.bind(this,4)}>{getLabel(1402,'下一步')}</Button>),
                    // (<Button type="ghost" onClick={()=>{setCusReportAddModalShow(false);allStore.wfCusReportFormStore.reload();}}>取消</Button>)
                ]
            },
            {
                buttons:[
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2s080z@lastStep`} type="primary" onClick={this.saveConfirm.bind(this,3)}>{getLabel(1876,'上一步')}</Button>),
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7bqevk@finish`} type="primary" onClick={()=>{setCusReportAddModalShow(false);allStore.wfCusReportFormStore.reload();}}>{getLabel(555,'完成')}</Button>),
                    // (<Button type="ghost" onClick={()=>{setCusReportAddModalShow(false);allStore.wfCusReportFormStore.reload();}}>取消</Button>)
                ]
            }
        ];
        return btnsArr[index].buttons;
    }
}